<template>
  <el-dialog v-move :title="formProps.title||name+(data.id?'编辑':'创建')" :width="formProps.dialogWidth"
    :close-on-click-modal="false" :visible.sync="dialogShow" append-to-body>
    <div style="padding-right: 100px;">
      <slot name='extra-area-top'></slot>
      <z-form :data="data" :formProps="formProps" :fields="fields"></z-form>
      <slot name='extra-area'></slot>
      <div class="text-right">
        <slot name="footer">
          <el-button @click="dialogShow = false">取消</el-button>
          <el-button v-if="!formProps.disabled" type="primary" @click.native="submit" :loading="submitLoading">确认
          </el-button>
          <slot name="operation"></slot>
        </slot>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import zForm from './form'

export default {
  name: 'z-form-dialog',
  components: { zForm },
  props: {
    name: { type: String, default: '' },
    fields: { type: Array, default: [] },
    data: { type: Object, default: {} },
    formProps: { type: Object, default: {} },
    visible: { type: Boolean, default: false },
    submitLoading: { type: Boolean, default: false },
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      },
    },
  },
  methods: {
    submit() {
      this.$emit('submit')
    },
  },
}
</script>

<style>
</style>
